<template>
	<div class="gk-layout-container">
		<div class="gk-layout-header">
			<!--工具栏-->
			<s-query perms="wh:Detail" @click="findPage">
				<s-item v-model="filters.itemId"></s-item>
				<el-form-item> <el-input v-model="filters.bName" placeholder="设备名称" /> </el-form-item>
				<el-form-item> <el-input v-model="filters.barCode" placeholder="设备编码" /> </el-form-item>
			</s-query>

			<div class="toolbar" style="float:right;padding-top:0px;padding-right:10px;">
				<el-form :inline="true" :size="global.gSize">
					<el-form-item>
						<el-input ref="barCode" v-model="dataForm1.barCode" @keyup.enter.native="addBarCodes"
							placeholder="设备编码回车后出库" />
					</el-form-item>
				</el-form>
			</div>
		</div>
		<!--表格内容栏-->

		<div class="gk-layout-main">
			<my-table :data="pageResult.content" :loading="loading">

				<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
					<template slot-scope="scope"> {{ scope.$index + 1 }} </template>
				</el-table-column>

				<el-table-column header-align="center" align="center" prop="itemId" label="物料名称" key="itemId"
					:formatter="itemFilter" />
				<el-table-column header-align="center" align="center" prop="bName" label="设备名称" key="bName" />
				<el-table-column header-align="center" align="center" prop="barCode" label="设备编码" key="barCode">
				</el-table-column>

				<el-table-column header-align="center" align="center" width="300" :label="$t('action.operation')">
					<template slot-scope="scope">
						<kt-button label="查看" perms="wh:Detail:show" @click="handleShow(scope.$index, scope.row)" />

					</template>
				</el-table-column>
			</my-table>
		</div>
		<!--分页栏-->
		<div class="toolbar gk-layout-footer" style="padding:10px;">
			<el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage"
				:current-page="filters.pageNum" :page-size="filters.pageSize" :total="pageResult.totalSize"
				style="float:right;">
			</el-pagination>
		</div>


		<el-dialog title="资产明细" width="70%" :visible.sync="dialogVisible" :close-on-click-modal="false">
			<el-form :model="dataForm" label-width="120px" ref="dataForm" :size="global.gSize" label-position="right">

				<el-row>
					<el-col :span="12">
						<s-item-form v-model="dataForm.itemId"></s-item-form>

					</el-col>
					<el-col :span="12">
						<el-form-item label="设备名称" prop="bName">
							<el-input type="text" v-model="dataForm.bName"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="流水号" prop="serialNumber">
							<el-input type="text" v-model="dataForm.bSerialNumber"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="序列号" prop="suquenceNum">
							<el-input type="text" v-model="dataForm.bSquenceNum">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

		</el-dialog>
	</div>
</template>

<script>
import KtButton from "@/views/Core/KtButton"
import { format } from "@/utils/datetime"
import { getItemName } from "@/utils/myUtil"
import MyTable from "@/views/Core/MyTable"
import SQuery from "@/components/Kj/SQuery"
import SDict from "@/components/Kj/SDict"
import SItem from "@/components/Kj/SItem"
import SItemForm from "@/components/Kj/SItemForm"
import KtDeleteButton from "@/views/Core/KtDeleteButton"
export default {
	components: {
		KtButton,
		MyTable,
		SQuery,
		SItem, SItemForm,
		SDict
	},
	data() {
		return {
			size: 'small',
			filters: {
				batchNo: '', pageNum: 1, pageSize: 15
			},
			dataForm1: { barCode: '' },
			operation: true,
			loading: false,
			dialogVisible: false,

			pageResult: {},

			dataForm: {
				id: 0
			}
		}
	},
	methods: {

		// 获取分页数据
		findPage: function (data) {
			if (data != -1) {
				data = data || 1
				this.filters.pageNum = data

			}

			this.filters.storeStatus = 29;//拣选
			this.$api.coreStockDet.findDetailPage(this.filters).then((res) => {
				this.pageResult = res.data
			})
		},
		addBarCodes: function (data) {
			let barCode = this.dataForm1.barCode;
			if (barCode.length > 4) {
				this.$api.coreStockDet.stockDetailOut(this.dataForm1).then((res) => {
					this.editLoading = false
					if (res.code == 200) {
						this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
						this.dataForm1.barCode = "";
						this.$refs['barCode'].focus()
					} else {
						this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
					}
					this.findPage(-1);
				})

			}


		},



		itemFilter: function (row, column, cellValue, index) {

			return getItemName(cellValue)
		},
		// 显示编辑界面
		handleShow: function (params, row) {
			this.dialogVisible = true
			this.operation = false;
			this.dataForm = Object.assign({}, row)
		},
		// 时间格式化
		dateFormat: function (row, column, cellValue, index) {
			return format(row[column.property])
		}
	},

	mounted() {
		this.findPage(1);
	}
}
</script>

<style scoped></style>